<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米官网-xaiomi</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./fonts/iconfont.css">
</head>
<body>
  <!-- 头部区域 -->
  <header>
    <div class="header w">
      <!-- 左侧导航模块 -->
      <ul>
        <li>
          <a href="#">小米商城</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">MIUI</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">IoT</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">云服务</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">天星数科</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">有品</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">小爱开放平台</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">企业团购</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">资质证照</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">协议规则</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">协议规则</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">下载App</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">Select Location</a>
          <span>|</span>
        </li>
      </ul>
      <!-- 右侧导航 -->
      <ul class="header-right">
        <li>
          <a href="#">登录</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">注册</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">消息通知</a>
        </li>
        <li>
          <a href="#">
            <i class="iconfont icon-gouwuchekong"></i>
            购物车 (0)
          </a>
        </li>
      </ul>
      
    </div>
  </header>
  <!-- 搜索加导航区 -->
  <nav class="w">
    <div class="logo">
    </div>
    <div class="nav-title">
      <ul>
        <li><a href="#">Xiaomi手机</a></li>
        <li><a href="#">Redmi红米</a></li>
        <li><a href="#">电视</a></li>
        <li><a href="#">笔记本</a></li>
        <li><a href="#">平板</a></li>
        <li><a href="#">家电</a></li>
        <li><a href="#">路由器</a></li>
        <li><a href="#">服务中心</a></li>
        <li><a href="#">社区</a></li>
      </ul>
    </div>
    <div class="search">
      <input type="text" placeholder="小米">
      <span> 
        <i class="iconfont icon-sousu"></i>
      </span>
    </div>
  </nav>
  <!-- 轮播图区域 -->
  <div class="banner w">
    <div class="ban-left">
      <ul>
        <li><a href="#">手机</a></li>
        <li><a href="#">电视</a></li>
        <li><a href="#">笔记本 平板</a></li>
        <li><a href="#">出行 穿戴</a></li>
        <li><a href="#">耳机 音响</a></li>
        <li><a href="#">家电</a></li>
        <li><a href="#">智能 路由器</a></li>
        <li><a href="#">电源 配件</a></li>
        <li><a href="#">健康 儿童</a></li>
        <li><a href="#">生活箱包</a></li>
      </ul>
    </div>
    <div class="ban-right">
      <img src="./upload/mi-bc.webp" alt="">
    </div>
  </div>
  <!-- 就业保障服务模块 -->
  <div class="serve w">
    <ul>
      <li>
        <a href="#">
          <i class="iconfont icon-fuwu" ></i>
          <p>保障服务</p>
        </a>
        <a href="#">
            <i class="iconfont icon-wodetuangou" ></i>
            <p>企业团购</p>
        </a>
        <a href="#">
            <i class="iconfont icon-shouhou" ></i>
            <p>F码通道</p>
        </a>
        <a href="#">
            <i class="iconfont icon-huafei" ></i>
            <p>米粉卡</p>
        </a>
        <a href="#">
            <i class="iconfont icon-xin" ></i>
            <p>以旧换新</p>
        </a>
        <a href="#">
            <i class="iconfont icon-SDqia" ></i>
            <p>话费充值</p>
        </a>
      </li>
      <li>
        <img src="./upload/serve-01.jpg" alt="">
      </li>
      <li>
        <img src="./upload/serve-01.jpg" alt="">
      </li>
      <li>
        <img src="./upload/serve-01.jpg" alt="">
      </li>
    </ul>
  </div>
  <!-- 页面主体区域 -->
  <div class="main">
    <!-- 主体头部图 -->
    <div class="main-head w">
      <img src="./upload/main-01.webp" alt="">
    </div>
    <!-- 手机介绍模块 -->
    <div class="introduce w">
      <div class="int-head">
        <sapn>手机</sapn>
        <a href="#">
          查看更多
          <i>></i>
        </a>
      </div>
      <div class="int-body w">
        <div class="int-b-l">
          <img src="./upload/introduce01.webp" alt="">
        </div>
        <div class="int-b-r">
          <ul>
            <li>
              <a href="#">
                <img src="./upload/phone 01.webp" alt="">
                <h3>Redmi Note 11T Pro系列</h3>
                <p>天玑8100｜真旗舰芯</p>
                <span>1999元起</span>
                <del>&nbsp;2099元</del>
              </a>
           </li>
           <li>
              <a href="#">
                <img src="./upload/phone 01.webp" alt="">
                <h3>Redmi Note 11T Pro系列</h3>
                <p>天玑8100｜真旗舰芯</p>
                <span>1999元起</span>
                <del>&nbsp;2099元</del>
              </a>
           </li>
           <li>
            <a href="#">
              <img src="./upload/phone 01.webp" alt="">
              <h3>Redmi Note 11T Pro系列</h3>
              <p>天玑8100｜真旗舰芯</p>
              <span>1999元起</span>
              <del>&nbsp;2099元</del>
            </a>
           </li>
           <li>
              <a href="#">
                <img src="./upload/phone 01.webp" alt="">
                <h3>Redmi Note 11T Pro系列</h3>
                <p>天玑8100｜真旗舰芯</p>
                <span>1999元起</span>
                <del>&nbsp;2099元</del>
              </a>
           </li>
           <li>
              <a href="#">
                <img src="./upload/phone 01.webp" alt="">
                <h3>Redmi Note 11T Pro系列</h3>
                <p>天玑8100｜真旗舰芯</p>
                <span>1999元起</span>
                <del>&nbsp;2099元</del>
            </a>
           </li>
           <li>
              <a href="#">
                <img src="./upload/phone 01.webp" alt="">
                <h3>Redmi Note 11T Pro系列</h3>
                <p>天玑8100｜真旗舰芯</p>
                <span>1999元起</span>
                <del>&nbsp;2099元</del>
              </a>
           </li>
           <li>
            <a href="#">
              <img src="./upload/phone 01.webp" alt="">
              <h3>Redmi Note 11T Pro系列</h3>
              <p>天玑8100｜真旗舰芯</p>
              <span>1999元起</span>
              <del>&nbsp;2099元</del>
            </a>
            </li>
            <li>
            <a href="#">
              <img src="./upload/phone 01.webp" alt="">
              <h3>Redmi Note 11T Pro系列</h3>
              <p>天玑8100｜真旗舰芯</p>
              <span>1999元起</span>
              <del>&nbsp;2099元</del>
            </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 手机介绍模块 -->
    <div class="introduce w">
      <div class="int-head">
        <sapn>手机</sapn>
        <a href="#">
          查看更多
          <i>></i>
        </a>
      </div>
      <div class="int-body w">
        <div class="int-b-l">
          <img src="./upload/introduce01.webp" alt="">
        </div>
        <div class="int-b-r">
          <ul>
            <li>
              <a href="#">
                <img src="./upload/phone 01.webp" alt="">
                <h3>Redmi Note 11T Pro系列</h3>
                <p>天玑8100｜真旗舰芯</p>
                <span>1999元起</span>
                <del>&nbsp;2099元</del>
              </a>
           </li>
           <li>
              <a href="#">
                <img src="./upload/phone 01.webp" alt="">
                <h3>Redmi Note 11T Pro系列</h3>
                <p>天玑8100｜真旗舰芯</p>
                <span>1999元起</span>
                <del>&nbsp;2099元</del>
              </a>
           </li>
           <li>
            <a href="#">
              <img src="./upload/phone 01.webp" alt="">
              <h3>Redmi Note 11T Pro系列</h3>
              <p>天玑8100｜真旗舰芯</p>
              <span>1999元起</span>
              <del>&nbsp;2099元</del>
            </a>
           </li>
           <li>
              <a href="#">
                <img src="./upload/phone 01.webp" alt="">
                <h3>Redmi Note 11T Pro系列</h3>
                <p>天玑8100｜真旗舰芯</p>
                <span>1999元起</span>
                <del>&nbsp;2099元</del>
              </a>
           </li>
           <li>
              <a href="#">
                <img src="./upload/phone 01.webp" alt="">
                <h3>Redmi Note 11T Pro系列</h3>
                <p>天玑8100｜真旗舰芯</p>
                <span>1999元起</span>
                <del>&nbsp;2099元</del>
            </a>
           </li>
           <li>
              <a href="#">
                <img src="./upload/phone 01.webp" alt="">
                <h3>Redmi Note 11T Pro系列</h3>
                <p>天玑8100｜真旗舰芯</p>
                <span>1999元起</span>
                <del>&nbsp;2099元</del>
              </a>
           </li>
           <li>
            <a href="#">
              <img src="./upload/phone 01.webp" alt="">
              <h3>Redmi Note 11T Pro系列</h3>
              <p>天玑8100｜真旗舰芯</p>
              <span>1999元起</span>
              <del>&nbsp;2099元</del>
            </a>
            </li>
            <li>
            <a href="#">
              <img src="./upload/phone 01.webp" alt="">
              <h3>Redmi Note 11T Pro系列</h3>
              <p>天玑8100｜真旗舰芯</p>
              <span>1999元起</span>
              <del>&nbsp;2099元</del>
            </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 家电头部蓝图 -->
    <div class="home-bc w">
      <img src="./upload/mian-02.webp" alt="">
    </div>
    <!-- 家电模块 -->
    <div class="home w clearfix">
      <div class="home-head">
        <h3>厨房家电</h3>
        <ul>
          <li><a href="#">净水器</a></li>
          <li><a href="#">烟灶</a></li>
          <li><a href="#">电饭煲</a></li>
          <li><a href="#">微蒸烤</a></li>
        </ul>
      </div>
      <div class="home-body">
        <ul>
          <li>
            <a href="#">
              <img src="./upload/jiadian01.webp" alt="">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./upload/phone02.webp" alt="">
              <h3>小米电视6 65" OLED 65英寸</h3>
              <p>OLED自发光屏 | 百万级对比度 | 4.6mm超薄全面屏</p>
              <span>1599元</span>
              <del>1999元</del>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./upload/phone02.webp" alt="">
              <h3>小米电视6 65" OLED 65英寸</h3>
              <p>OLED自发光屏 | 百万级对比度 | 4.6mm超薄全面屏</p>
              <span>1599元</span>
              <del>1999元</del>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./upload/phone02.webp" alt="">
              <h3>小米电视6 65" OLED 65英寸</h3>
              <p>OLED自发光屏 | 百万级对比度 | 4.6mm超薄全面屏</p>
              <span>1599元</span>
              <del>1999元</del>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./upload/phone02.webp" alt="">
              <h3>小米电视6 65" OLED 65英寸</h3>
              <p>OLED自发光屏 | 百万级对比度 | 4.6mm超薄全面屏</p>
              <span>1599元</span>
              <del>1999元</del>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./upload/家电02.webp" alt="">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./upload/phone02.webp" alt="">
              <h3>小米电视6 65" OLED 65英寸</h3>
              <p>OLED自发光屏 | 百万级对比度 | 4.6mm超薄全面屏</p>
              <span>1599元</span>
              <del>1999元</del>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./upload/phone02.webp" alt="">
              <h3>小米电视6 65" OLED 65英寸</h3>
              <p>OLED自发光屏 | 百万级对比度 | 4.6mm超薄全面屏</p>
              <span>1599元</span>
              <del>1999元</del>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./upload/phone02.webp" alt="">
              <h3>小米电视6 65" OLED 65英寸</h3>
              <p>OLED自发光屏 | 百万级对比度 | 4.6mm超薄全面屏</p>
              <span>1599元</span>
              <del>1999元</del>
            </a>
          </li>
          <li>
            <div class="h-left">
              <a href="#">
                <article>
                  <h3>米家手持无线吸尘器1C</h3>
                  <br>
                  <span>849元</span>
                </article>
                <img src="./upload/icon01.webp" alt="">
              </a>
            </div>
            <div class="h-right">
              <a href="#">
                <article>
                  <h3>浏览更多</h3>
                  <br>
                  <span>清洁</span>
                </article>
                <img src="./images/进入箭头小.png" alt="">
              </a>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 家电模头部蓝图2 -->
    <div class="home-bc w">
      <img src="./upload/mian-02.webp" alt="">
    </div>
    <!-- 家电模块 -->
    <div class="home w clearfix">
      <div class="home-head">
        <h3>厨房家电</h3>
        <ul>
          <li><a href="#">净水器</a></li>
          <li><a href="#">烟灶</a></li>
          <li><a href="#">电饭煲</a></li>
          <li><a href="#">微蒸烤</a></li>
        </ul>
      </div>
      <div class="home-body">
        <ul>
          <li>
            <a href="#">
              <img src="./upload/jiadian01.webp" alt="">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./upload/phone02.webp" alt="">
              <h3>小米电视6 65" OLED 65英寸</h3>
              <p>OLED自发光屏 | 百万级对比度 | 4.6mm超薄全面屏</p>
              <span>1599元</span>
              <del>1999元</del>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./upload/phone02.webp" alt="">
              <h3>小米电视6 65" OLED 65英寸</h3>
              <p>OLED自发光屏 | 百万级对比度 | 4.6mm超薄全面屏</p>
              <span>1599元</span>
              <del>1999元</del>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./upload/phone02.webp" alt="">
              <h3>小米电视6 65" OLED 65英寸</h3>
              <p>OLED自发光屏 | 百万级对比度 | 4.6mm超薄全面屏</p>
              <span>1599元</span>
              <del>1999元</del>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./upload/phone02.webp" alt="">
              <h3>小米电视6 65" OLED 65英寸</h3>
              <p>OLED自发光屏 | 百万级对比度 | 4.6mm超薄全面屏</p>
              <span>1599元</span>
              <del>1999元</del>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./upload/家电02.webp" alt="">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./upload/phone02.webp" alt="">
              <h3>小米电视6 65" OLED 65英寸</h3>
              <p>OLED自发光屏 | 百万级对比度 | 4.6mm超薄全面屏</p>
              <span>1599元</span>
              <del>1999元</del>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./upload/phone02.webp" alt="">
              <h3>小米电视6 65" OLED 65英寸</h3>
              <p>OLED自发光屏 | 百万级对比度 | 4.6mm超薄全面屏</p>
              <span>1599元</span>
              <del>1999元</del>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./upload/phone02.webp" alt="">
              <h3>小米电视6 65" OLED 65英寸</h3>
              <p>OLED自发光屏 | 百万级对比度 | 4.6mm超薄全面屏</p>
              <span>1599元</span>
              <del>1999元</del>
            </a>
          </li>
          <li>
            <div class="h-left">
              <a href="#">
                <article>
                  <h3>米家手持无线吸尘器1C</h3>
                  <br>
                  <span>849元</span>
                </article>
                <img src="./upload/icon01.webp" alt="">
              </a>
            </div>
            <div class="h-right">
              <a href="#">
                <article>
                  <h3>浏览更多</h3>
                  <br>
                  <span>清洁</span>
                </article>
                <img src="./images/进入箭头小.png" alt="">
              </a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <footer>
    <!-- 头部区域  -->
    <div class="ft-head w clearfix">
      <ul>
        <li>
          <a href="#">预约维修服务</a>
        </li>
        <li>
          <a href="#">7天无理由退货</a>
        </li>
        <li>
          <a href="#">15天免费换货</a>
        </li>
        <li>
          <a href="#">满69元包邮</a>
        </li>
        <li>
          <a href="#">1100余家售后网点</a>
        </li>
      </ul>
    </div>
    <!-- 结尾 -->
    <div class="ft-body w">
      <div class="ft-bl">
        <dl>
          <dt>选购指南</dt>
          <dd>手机</dd>
          <dd>电视家电</dd>
          <dd>笔记本</dd>
          <dd>平板</dd>
          <dd>穿戴</dd>
          <dd>耳机</dd>
        </dl>
        <dl>
          <dt>售后政策</dt>
          <dd>维修服务</dd>
          <dd>订单查询</dd>
          <dd>笔记本</dd>
          <dd>平板</dd>
          <dd>保障服务</dd>
          <dd>防伪查询</dd>
          <dd>F码通道</dd>
        </dl>
        <dl>
          <dt>小米之家</dt>
          <dd>服务网点</dd>
          <dd>线下门店</dd>
          <dd>授权体验店/专区</dd>
        </dl>
        <dl>
          <dt>关注我们</dt>
          <dd>新浪微博</dd>
          <dd>官方微信</dd>
          <dd>联系我们</dd>
          <dd>公益基金会</dd>
        </dl>
      </div>
      <div class="ft-br">
        <h1>400-100-5678</h1>
        <p>8:00-18:00 (仅收市话费)</p>
        <a href="#">人工客服</a>
      </div>
    </div>
  </footer>
</body>
</html>